<template>
  <div id="app">
    <VHeader :seller="seller"></VHeader>
    <div class="menu">
      <router-link :to="{ name: 'Goods' }"><li class="menu-item" >商品</li></router-link>
      <router-link :to="{ name: 'Comment'}"><li class="menu-item" >评论</li></router-link>
      <router-link :to="{ name: 'Seller'}"><li class="menu-item" >商家</li></router-link>
    </div>
    <router-view :seller="seller"></router-view>
  </div>
</template>

<script  type="text/ecmascript-6">
  import VHeader from './components/Header/Header.vue'
  export default {
    name: 'app',
    created () {
      this.$http.get('/api/seller').then((resp) => {
        this.seller = resp.body
        if (this.seller.code === 0) {
          this.seller = this.seller.data
        } else {
          this.seller = {}
        }
      })
    },
    data () {
      return {
        seller: {}
      }
    },
    components: {VHeader}
  }
</script>

<style  lang="stylus" rel="stylesheet/stylus">
#app
  font-family: 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  color: #2c3e50
  margin:0px
  .menu
    display :flex
    width :100%
    height:40px
    background-color :#E7E7E7
    text-align :center
    a
      display:inline-block
      flex:1
      line-height: 40px
      list-style-type:none;
      color:#333333
      text-decoration :none
    .router-link-active
      color:#ff0000
      background-color:#FFFFFF
</style>
